<template>
  <div class="video-render">
    <div class="video-render-head">
      <el-page-header @back="goBack">
        <template #content>
          <span class="video-render-head-title">{{ resourceInfo.resourceName }}</span>
        </template>
      </el-page-header>
    </div>
    <div class="video-render-wrap">
      <div class="video-render-video">
        <video ref="videoDom" :src="playVideo.playPath" controls preload="metadata" :autoplay="autoPlay">
<!--          <source v-if="playVideo.playPath"  type="video/mp4">-->
        </video>
      </div>
      <div class="video-render-base">
        <h4>{{ resourceInfo.resourceName }}</h4>
        <div class="video-render-base-year">
          <span>{{ resourceInfo.resourceDay }}年 {{ resourceInfo.resourceAddress }}</span>
          <span>{{ resourceInfo.resourceScore }}分</span>
        </div>
        <div class="video-render-base-tags">{{ handleTags(resourceInfo.resourceTags) }}</div>
        <div class="video-render-base-list">
          <h5>资源列表</h5>
          <div style="overflow: auto; height: calc(75vh - 158px)">
            <div v-for="(item, index) in resourceDetailList" :key="index" class="video-render-base-list-item">
              <svg-icon v-if="playVideo.id === item.id" class="play-svg" icon-class="play" />
              <div v-else class="play-svg-count">{{ index + 1 }}</div>
              <span @click="handlePlayFile(item)" class="text-hidden-exp" :style="{ color: playVideo.id === item.id ? 'var(--tc-primary)' : 'var(--tc-white)' }">{{ item.fileName }}</span>
              <div class="download-btns">
                <el-button text plain @click="handleDownload(item)" type="warning" size="small">下载</el-button>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup name="CategoryCard">
import {getResourceInfo, getResourceDetailList, getOpenAuthCode} from "@/api/source.js";
import {useRoute, useRouter} from "vue-router";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const baseUrl = import.meta.env.VITE_APP_BASE_API;
const playUrl = import.meta.env.VITE_APP_PLAY_API;
const envName = import.meta.env.VITE_APP_ENV;

const playVideo = ref({})

const resourceInfo = ref({});
const resourceDetailList = ref([]);

const autoPlay = ref(false);

const videoDom = ref(null);

// -135
const maxHeight = ref('400px');

const queryResourceInfo = (id) => {
  getResourceInfo(id).then(res => {
    if (res.code === 200) {
      resourceInfo.value = res.data
    }
  })
}

/** 播放默认ID */
const openVideoPlay = (row, play) => {
  playVideo.value = row;
  // 获取临时播放链接
  getOpenAuthCode(row.id).then(res => {
    if (res.code === 200) {
      if (res.data.authCode) {
        let basePath = baseUrl;
        if (envName === 'development') {
          basePath = playUrl
        }
        if (play) {
          autoPlay.value = true;
        } else {
          autoPlay.value = false;
        }
        playVideo.value.playPath = `${basePath}/open/client/sources/video/view/${res.data.authCode}`;
      }
    }
  })
}

const handlePlayFile = (row) => {
  if (playVideo.value && playVideo.value.id === row.id) {
    return;
  }
  videoDom.value.pause();
  playVideo.value.playPath = "";
  openVideoPlay(row, true);
}


const queryResourceDetailList = (id) => {
  getResourceDetailList(id).then(res => {
    if (res.code === 200) {
      resourceDetailList.value = res.data
      if (resourceDetailList.value.length > 0) {
        openVideoPlay(resourceDetailList.value[0]);
      }
    }
  })
}

// 初始化数据函数
const initData = () => {
  const query = route.query;
  if (query && query.resourceId) {
    queryResourceInfo(query.resourceId);
    queryResourceDetailList(query.resourceId);
  }
}

const handleDownload = (row) => {
  // 获取临时播放链接
  getOpenAuthCode(row.id).then(res => {
    if (res.code === 200) {
      if (res.data.authCode) {
        let basePath = baseUrl;
        if (envName === 'development') {
          basePath = playUrl
        }
        // autoPlay.value = true;
        const downloadPath = `${basePath}/open/client/sources/common/download/${res.data.authCode}`;

        // 创建一个临时的a标签用于下载
        const link = document.createElement('a');
        link.href = downloadPath;
        // 触发点击事件
        document.body.appendChild(link);
        link.click();
        // 清理：移除临时创建的a标签和释放Blob对象的URL
        document.body.removeChild(link);
      }
    }
  })
}

const goBack = () => {
  router.back();
}

initData();
</script>

<style lang="scss" scoped>
.video-render {
  background: var(--tc-video-background);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  height: calc(100vh - 40px);
  overflow: auto;

  &-head {
    padding: 10px 20px 0 20px;
    color: #ffffff;

    &-title {
      color: rgba(255, 255, 255, 0.8);
      font-size: 14px;
    }
  }

  &-wrap {
    padding: 10px 20px;
    display: flex;
  }

  &-video {
    flex: 1;
    width: 0;

    > video {
      width: 100%;
      height: 75vh;
      background-color: rgba(0, 0, 0, 0.4);
    }
  }

  &-base {
    width: 300px;
    padding-left: 20px;

    h4 {
      font-size: 20px;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      margin: 0 0 10px 0;
    }

    &-year {
      display: flex;
      align-items: center;
      justify-content: space-between;

      span:first-child {
        font-size: 16px;
        font-weight: 400;
        color: rgba(255, 255, 255, 0.7);
      }

      span:last-child {
        font-size: 16px;
        font-weight: 400;
        color: var(--tc-primary);
      }
    }

    &-tags {
      font-size: 14px;
      font-weight: 400;
      color: rgba(255, 255, 255, 0.4);
      margin-top: 10px;
    }

    &-list {

      > h5 {
        font-size: 16px;
        font-weight: 400;
        color: rgba(255, 255, 255, 1);
        margin-bottom: 10px;
      }

      &-item {
        display: flex;
        align-items: center;
        color: var(--tc-white);
        font-size: 14px;
        padding: 4px 10px;
        background-color: rgba(255, 255, 255, 0.1);
        margin-bottom: 10px;
        cursor: pointer;
        user-select: none;
        position: relative;

        .play-svg {
          width: 14px;
          height: 14px;
          color: var(--tc-primary);
        }

        .play-svg-count {
          width: 14px;
          height: 14px;
          text-align: center;
        }

        > span {
          margin-left: 4px;
          flex: 1;
          width: 0;
        }

        .download-btns {
          width: 40px;
        }
      }
    }

  }

}
</style>

